<template>
  <div class="main_container">
    <div class="waterfall">
      <div v-for="(item, index) in imgArr" :key="index" class="content_box">
        <img :src="item.img" alt="" class="imgclass">
        <div>
          <div class="info_title">{{item.info_title}}</div>
          <div class="line_wrap">
            <div class="user_info">{{item.user_info}}</div>
            <div class="praise_info">
              <i class="iconfont icon-dianzan"></i>
              {{item.praise_info}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name:'maincontent',
  components: {},
  data() {
    return {
      imgArr: {
        list1: {
          img: '1.jpg',
          info_title: '厦门攻略 | 两天三夜 花费800',
          user_info: '红发小新',
          praise_info: '1010'
        },

        list2: {
          img: '2.jpg',
          info_title: '【恩施 | 北纬30度de四天三晚详细攻略】',
          user_info: 'jing & C',
          praise_info: '1072'
        },
        list3: {
          img: '3.jpg',
          info_title: '西安游玩，总结的避坑指南',
          user_info: '树洞先生',
          praise_info: '1351'
        },
        list4: {
          img: '4.jpg',
          info_title: '魔都高性价比自主top5，你知道吗',
          user_info: '小艾养猪',
          praise_info: '504'
        },
        list5: {
          img: '5.jpg',
          info_title: '超详细湖北周边|恩施避暑最全攻略清单',
          user_info: '小冰同学',
          praise_info: '202'
        },
        list6: {
          img: '6.jpg',
          info_title: '有#避暑山庄#，何必再去京都奈良！',
          user_info: '大宗',
          praise_info: '2096'
        },
        list7: {
          img: '3.jpg',
          info_title: '悬崖上的漂流感受不一样的速度与激情',
          user_info: 'M_nice',
          praise_info: '689'
        },
        list8: {
          img: '8.jpg',
          info_title: '广州 | 毕加索画展The Legacy',
          user_info: '红发小新',
          praise_info: '1010'
        },
        list9: {
          img: '9.jpg',
          info_title: '厦门攻略 | 两天三夜 花费800',
          user_info: '红发小新',
          praise_info: '1010'
        },
        list10: {
          img: '1.jpg',
          info_title: '厦门攻略 | 两天三夜 花费800',
          user_info: '红发小新',
          praise_info: '1010'
        },
        list11: {
          img: '2.jpg',
          info_title: '厦门攻略 | 两天三夜 花费800',
          user_info: '红发小新',
          praise_info: '1010'
        },
        list12: {
          img: '2.jpg',
          info_title: '厦门攻略 | 两天三夜 花费800',
          user_info: '红发小新',
          praise_info: '1010'
        }
      }
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},

 }
</script>
<style scoped>
 .waterfall {
   display: flex;
   flex-wrap: wrap; 
   justify-content: space-evenly;
   height: 83vh;
   width: 100vw;
   overflow: scroll;
 }
  .content_box {
    box-sizing: border-box;
    margin-bottom: 5px;
    height: 40vh;
    width: calc(100%/2 - 20px);
     
  }
 .imgclass {
    width: 100%;
    height: 80%;
    border-radius: 7px 7px 0 0 ;
 }
 .line_wrap {
   display: flex;
   justify-content: space-between;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: smaller;
 }
</style>